<template>
  <div class="edit">
    <div class="left">
      <el-tabs type="border-card" class="tabs">
        <el-tab-pane label="全局设置" class="tab1"
          ><div class="taskInfo">
            <div class="title">任务信息<i class="iconfont icon-xiala"></i></div>
            <div class="other">
              <div>任务名</div>
              <el-input
                placeholder="test_path01"
                v-model="inputTaskName"
                clearable
              >
              </el-input>
              <div>创建人</div>
              <el-input placeholder="liu" v-model="inputCreater" clearable>
              </el-input>
            </div>
          </div>
          <div class="navigationSetting">
            <div class="title">
              导航设定<i class="iconfont icon-xiala"></i>
              <div class="other">
                <div class="velocity">
                  <div>速度(m/s)</div>
                  <div class="info">
                    <i class="iconfont icon-jian btn" @click="inputVelocity--"></i>
                    <el-input
                      placeholder="0.5"
                      v-model="inputVelocity"
                      clearable
                    ></el-input
                    ><i class="iconfont icon-jia btn" @click="inputVelocity++"></i>
                  </div>
                </div>
                <div class="mode">
                  <div>避障模式</div>
                  <div>
                    <el-select
                      v-model="task"
                      placeholder="请选择"
                      popper-class="modeSelect"
                    >
                      <el-option
                        v-for="item in taskList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <div class="navigation">
                  <div>导航模式</div>
                  <el-input
                    placeholder="point"
                    v-model="inputNavigation"
                    clearable
                  >
                  </el-input>
                </div>
              </div>
            </div>
          </div>

          <div class="otherInfo">
            <div class="title">其他信息<i class="iconfont icon-xiala"></i></div>
            <div class="other">
              <div>备注</div>
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入描述方案"
                v-model="textarea"
                class="textarea"
              >
              </el-input>
            </div></div
        ></el-tab-pane>
        <el-tab-pane label="航点设置" class="tab2">航点设置</el-tab-pane>
      </el-tabs>
    </div>
    <div class="right">
      <i class="iconfont icon-tuichu"></i>
      <div class="map"></div>
    </div>
    <div class="bottom">
      <div class="icon">
        <i class="iconfont icon-center"></i>
        <i class="iconfont icon-changjietu"></i>
        <i class="iconfont icon-back"></i>
        <i class="iconfont icon-fanhuixiayibu"></i>
        <i class="iconfont icon-jia"></i>
        <i class="iconfont icon-jian"></i>
      </div>
      <div class="end"><span>保存任务</span></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      task: "",
      taskList: [
        {
          value: "test_path01",
          label: "避障模式",
        },
        {
          value: "test_path02",
          label: "停障模式",
        },
      ],
      inputTaskName: "",
      inputCreater: "",
      inputVelocity: 0.5,
      inputNavigation: "",
      textarea: "",
    };
  },
};
</script>
<style lang="less" scoped>
//tab页样式
//header
/deep/.el-tabs__nav-scroll {
  background: #545554;
}
/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  background: #494141;
  border: none;
}
/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  color: #cbc6c6;
  border: none;
}
//tabs
/deep/.tabs {
  background: #494141;
  border: none;
}

/deep/.modeSelect {
  background: #000;
  border: none;
}
/deep/.el-select .el-input__inner {
  color: #fff;
  background: #000;
  // border: 1px solid #1118f4;
  border: none;
  height: 30px;
}
/deep/.el-input__inner {
  padding: 5px;
}
/deep/.el-select-dropdown__item {
  color: #fff;
}
/deep/.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #3622ee;
  border-radius: 5px;
}
/deep/.el-select .el-input .el-select__caret {
  vertical-align: middle;
}
/deep/.el-input__icon {
  height: 30px;
  line-height: 30px;
}
/deep/.popper__arrow::after {
  border-bottom-color: #000 !important;
  top: 0px !important;
  left: 0.5px !important;
  margin-left: -6px;
}



/deep/.el-textarea {
  border-radius: 5px;
}
/deep/.el-textarea__inner {
  background: #000;
  border: none;
  border-radius: 5px;
  border-bottom: 1px solid #454343;
  padding: 5px;
  color: #fff;
}
.velocity{
  /deep/.el-input__inner{
    padding: 0 15px;
    margin:0 2px;
    width: 92%;
    border: 1px solid #6f6969;
  }
}

/deep/.el-input--suffix .el-input__inner {
  background: #000;
  height: 30px;
  border: none;
  color: #fff;
}


.edit {
  display: flex;
  position: relative;
  .left {
    width: 25%;
    height: 100vh;
    background: #494141;
    .tabs {
      width: 100%;
      .tab1 {
        display: flex;
        flex-direction: column;
        .taskInfo {
          width: 100%;
          height: 180px;
          .other {
            padding: 20px 5px 20px 10px;
            .info {
              padding: 5px;
              background: #000;
              border-radius: 5px;
              margin-bottom: 10px;
            }
          }
        }
        .navigationSetting {
          width: 100%;
          height: 180px;
          .other {
            display: flex;
            flex-wrap: wrap;
            padding: 20px 5px 20px 10px;
            .velocity {
              width: 45%;
              margin-right: 10px;
              .info {
                display: flex;
                .btn {
                  width: 40px;
                  height: 30px;
                  background: #000;
                  // border: 1px solid #6f6969;
                  text-align: center;
                  line-height: 30px;
                }
              }
            }
            .mode {
              width: 45%;
            }
            .navigation {
              width: 50%;
              .text {
                background: #000;
                height: 30px;
                line-height: 30px;
                padding-left: 5px;
                border-radius: 5px;
                margin-right: 10px;
              }
            }
          }
        }
        .otherInfo {
          width: 100%;
          height: 180px;
          .other {
            padding: 10px;
            .textarea {
              background: #000;
            }
          }
        }
        .title {
          position: relative;
          color: #eee1e1;
          .icon-xiala {
            position: absolute;
            right: 10px;
            font-size: 18px;
            color: #fff;
            cursor: pointer;
          }
        }
      }
    }
  }
  .right {
    width: 80%;
    height: 100vh;
    background: #fff;
    position: relative;
    .iconfont {
      position: absolute;
      top: 2px;
      left: 2px;
      padding: 5px;
      background: #000000;
      &:hover {
        cursor: pointer;
      }
    }
    .map {
      width: 30%;
      height: 100vh;
      background: #b6b1b1;
      margin-left: 350px;
    }
  }
  .bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: #3c3838;
    .icon {
      display: flex;
      margin-left: 300px;
      .iconfont {
        padding:12px 10px;
        margin: 0 20px;
      }
    }
    .end {
      height: 100%;
      width: 100px;
      line-height: 100%;
      position: absolute;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: blue;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
